<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的超大心形</title>
    <style>
        body, html {
          height: 100%;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f0f0f0;
        }
        .beating-heart {
          position: relative;
          width: 300px;
          height: 300px;
          animation: beat 1s infinite;
        }
        .beating-heart:before,
        .beating-heart:after {
          position: absolute;
          content: "";
          left: 50%;
          top: 0;
          width: 150px;
          height: 225px;
          background: red;
          border-radius: 150px 150px 0 0;
          transform: translateX(-50%) rotate(-45deg);
          transform-origin: 0 100%;
        }
        .beating-heart:after {
          transform: translateX(-50%) rotate(45deg);
        }
        @keyframes beat {
          0%, 100% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.1);
          }
        }
    </style>
</head>
<body>

<div class="beating-heart"></div>

<script>
    // JavaScript代码可以留空，因为动画已经通过CSS完成
</script>
</body>
</html>